<template>
    <div class="form-group" :class="fix">
        <label :class="!upTable ? 'labelSize':'control_up_label'"><span class="required" v-if="required">*</span>{{title}}：</label>
        <div class="checkbox-item" :style="styles | style-filter upTable ">
            <label v-for="option in options"><input type="checkbox" :disabled="disabled" :name="name" :value="option.value" v-model="value">{{option.key}}</label>
            <div class="checkbox-error"></div>
        </div>
        <!--<input type="text" class="form-control" v-model="value" :type="type" :name="name" :id="name"v-else>-->
    </div>
</template>
<style scoped="">
    .checkbox-item{
        display: inline-table;
    }
    .checkbox-error{
        position: relative;
        top:-38px;
        left:-165px;
    }
    .checkbox-error>label.error{
        position: absolute;
        top:0;
        left:0
    }
</style>

<script>
    import {randomId} from "./general";

    export default {
        data: () => ({
            id: randomId()
        }),
        computed: {
            fix(){
                if(this.upTable){
                    return "fix_height"
                }  else{
                    return "fix_min_width"
                }
            },
        },
        props: {
            title: {type: String},
            name: String,
            value: {type: Array, default: () => []},
            disabled: {type: Boolean, default: false},
            required: {type: Boolean, default: false},
            upTable: {type: Boolean, default: false},
            options: {type: Array, default: () => []},
            styles:{type: String, default: "width:265px"}
        },
        methods: {
            reset () {
                this.value = "";
            }
        },
        filters:{
            styleFilter: (value, e) => e ? ((value === "width:265px"|| value==="width:265px;") ? "" :value || "") : value
        }
    }
</script>